<template>
	<!-- D:/project/app/ydz-app-uniapp/static/images/login -->
	<view class="pagebody" :style="{ minheight: maxHeight }">
		<view class="topbgbox">
			<view class="justify-between align-center">
				<image @click="backpage" src="@/static/images/login/leftjt.png" alt="" style="width: 48rpx;height: 48rpx;"></image>
				<navigator style="font-size: 40rpx;color: #303B39;font-weight: 500;" url="/pages/login/register">注册</navigator>
			</view>
			<view class="color303b39 fwbold" style="font-size: 60rpx;margin-top: 64rpx;margin-left: 23rpx;">
				账号密码登录
			</view>
			<view class="color303b39 fz32" style="margin-top: 32rpx;margin-left: 23rpx;">
				欢迎来到药队长
			</view>
			<view class="inputbox" style="margin-top: 77rpx;">
				<uni-easyinput v-model="loginForm.username"  :placeholderStyle="placeholderStyle"
					placeholder="请输入您的用户名" ></uni-easyinput>
			</view>
			<view class="inputbox" style="margin-top: 77rpx;">
				<uni-easyinput type="password" v-model="loginForm.password" :placeholderStyle="placeholderStyle"
					placeholder="请输入您的密码" ></uni-easyinput>
			</view>
			<view  style="margin-top: 78rpx; color: #576260;" class="fz26 flex-row align-center">
				<checkbox-group @change="changebox">
					<label>
						<checkbox value="cb" color="#FFCC33" style="transform:scale(0.7)" />
					</label>
				</checkbox-group>
				同意<span @click="toyspage(1)" style="color: #50A495;margin: 0 16rpx;">用户协议</span>和<span @click="toyspage(2)"
					style="color: #50A495;margin: 0 16rpx;">隐私政策</span>
			</view>
			<view class="align-center loginbtn justify-between">
				<button class="button fwbold" type="primary" @click="login">登 录</button>
			</view>
			<view class="justify-between" style="margin-top: 48rpx">
				<navigator style="font-size: 28rpx;color: #303B39;" url="/pages/login/phonelogin">手机验证码登录</navigator>
				<navigator style="font-size: 28rpx;color: #303B39;" url="/pages/login/forget">忘记密码?</navigator>
			</view>
<!-- 			<view class="flex-col justify-center align-center" style="margin-top: 100rpx;">
				<view class="" style="color: #A4AFAD;font-size: 28rpx;">
					其他登录方式
				</view>
				<image style="width: 88rpx;height: 88rpx; margin-top: 36rpx;" src="@/static/images/login/wxlogocolor.png" alt=""></image>
			</view> -->
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import openwsjs from '../../plugins/openSocket.js';
	export default {
		onLoad() {
			// 获得屏幕最大高度
			let systemInfo = uni.getSystemInfoSync();
			this.maxHeight = systemInfo.windowHeight + "px";
		},
		data() {
			return {
				maxHeight: '',
				agree:false,
				loginForm:{
					username: '',
					password:'',
				},
				placeholderStyle: "color:#7E8987;font-size:32rpx",
			}
		},
		methods: {
			login(e){
				if (this.loginForm.username === "") {
				  this.$refs.uToast.show({
				  	title: '请输入您的账号',
				  })	
				} else if (this.loginForm.password === "") {
				  this.$refs.uToast.show({
				  	title: '请输入您的密码',
				  })	
				} else if (!this.agree) {
				  this.$refs.uToast.show({
				  	title: '请勾选同意用户协议和隐私政策',
				  })	
				} else {
				  this.$modal.loading("登录中，请耐心等待...")
				  this.pwdLogin()
				}
			},
			toyspage(typeid){
				uni.navigateTo({ url:'/pages/mine/privacy/index?typeid='+typeid });
			},
			// 密码登录
			async pwdLogin() {
			  this.$store.dispatch('Login', this.loginForm).then(() => {
			    this.$modal.closeLoading()
			    this.loginSuccess()
			  }).catch(() => {
			    if (this.captchaEnabled) {
			      this.getCode()
			    }
			  })
			},
			// 登录成功后，处理函数
			loginSuccess(result) {
			  // 设置用户信息
			  this.$store.dispatch('GetInfo').then(res => {
				  // 开启websocket
				  // openwsjs.openws(res.user.userId)
				  if(res.userDocument){
					  this.$tab.reLaunch('/pages/home')
				  }else{
					  this.$tab.reLaunch('/pages/login/setarea')
				  }
			  })
			},
			backpage(){
				uni.navigateBack({
				    delta: 1
				});
			},
			changebox(e) {
				if (e.detail.value.length > 0) {
					this.agree = true
				} else {
					this.agree = false
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background: #fff;
	}

	::v-deep .is-input-border {
		border: none;
	}

	::v-deep .uni-easyinput__content {
		background: transparent !important;
	}

	::v-deep .uni-input-input {
		font-size: 32rpx;
	}
	
	::v-deep uni-checkbox .uni-checkbox-input {
		background: transparent;
	}
	
	::v-deep uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		color: #fff;
		border-color: #00D9B2;
		background: #00D9B2;
	}
	
	::v-deep .uni-icons{
		font-size: 52rpx;
	}

	.pagebody {
		box-sizing: border-box;

		.topbgbox {
			box-sizing: border-box;
			padding: 14rpx 40rpx 0;
			background-image: url('/static/images/login/otherbg.png');
			position: relative;
			background-repeat: no-repeat;
			background-size: contain;

			.inputbox {
				border-bottom: 1px solid #B8C3C1;
				padding-bottom: 0.1rem;
			}
			.loginbtn{
				// position: absolute;
				// bottom: 0;
				margin-top: 96rpx;
				uni-button {
					background-color: #00D9B2;
					border-radius: 98rpx;
					width: 668rpx;
				}
				
				uni-button:after {
					border: none;
				}
				
				.button {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 36rpx;
				
				}
			}
		}

	}
</style>